<template lang="html">
<div class="section-page renovationbmenu-page views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">导航菜单</div>
        <div class="page-body pad-no">
            <section class="page-box">
                <div class="welcome-container">
                    <section class="account-stat">
                        <div class="diy-main flex-row flex-justify-c">
                            <div>

                            </div>
                            <div class="diy-phone-box flex-col">
                                <div class="diy-phone">
                                    <div class="phone-body">
                                        <div class="phone-title">导航菜单</div>
                                        <div class="phone-main">
                                            <!-- {{editData}} -->
                                            <!-- :style="{'width': `calc(${100 / editData.length})` }" -->
                                            <div class="diy-menu flex-row flex-align-c flex-justify-c" v-bind:style="{ background: getstyleData.bgcolor }">
                                                <div class="item" :style="{'width': `calc(${100 / editData.length}%)`}" v-for="(item, index) in editData" :key="index">
                                                    <div class="inner flex-col flex-justify-b flex-align-c" v-bind:style="{ background: getstyleData.bgcolor }">
                                                        <img v-if="item.iconPath.file_path" :src="item.iconPath.file_path" class="iconimg" />
                                                        <img v-else class="iconimg" />
                                                        <span
                                                        class="text"
                                                        v-bind:style="{ color: getstyleData.textcolor }"
                                                        >{{ item.text }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="diy-edit-box flex-col">
                              <div class="diy-editor" v-if="!$agent">
                                 是否开启多渠道：
                                  <el-radio-group v-model="open" @change="changeOpen">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                  </el-radio-group>
                              </div>
                             <div v-if="!$agent">
                                <div class="diy-editor" v-if='open==1'>
                                 选择渠道：
                                  <el-select  v-model='source' @change="change">
                                    <el-option value="2" v-if="JSON.stringify($store.getters.power).indexOf('wxapp')>-1" label='微信小程序'></el-option>
                                    <el-option value="3" v-if="JSON.stringify($store.getters.power).indexOf('H5')>-1"  label='H5'></el-option>
                                    <el-option value="4" v-if="JSON.stringify($store.getters.power).indexOf('wechat')>-1"  label='微信公众号'></el-option>
                                    <el-option value="5" v-if="JSON.stringify($store.getters.power).indexOf('android')>-1"  label='安卓'></el-option>
                                    <el-option value="6" v-if="JSON.stringify($store.getters.power).indexOf('ios')>-1"  label='苹果'></el-option>
                                    <el-option value="7" v-if="JSON.stringify($store.getters.power).indexOf('aliapp')>-1"  label='支付宝小程序'></el-option>
                                    <el-option value="9" v-if="JSON.stringify($store.getters.power).indexOf('toutiaoapp')>-1"  label='抖音-头条'></el-option>
                                    <el-option value="8" v-if="JSON.stringify($store.getters.power).indexOf('baiduapp')>-1"  label='百度小程序'></el-option>
                                  </el-select>
                              </div>
                             </div>
                        

                                <div class="diy-editor">
                                    <p class="edit-title">将导航应用在以下页面：</p>
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox :label="'index'">首页</el-checkbox>
                                        <el-checkbox :label="'category'">查找</el-checkbox>
                                        <el-checkbox :label="'comment'">好评</el-checkbox>
                                        <el-checkbox :label="'user'">我的</el-checkbox>
                                        <el-checkbox :label="'newgoodstore'">新版好店</el-checkbox>
                                        <el-checkbox :disabled="!paySetting.plugin.member.open" :label="'membercard'">会员卡</el-checkbox>
                                        <el-checkbox :label="'enter'">商家入驻</el-checkbox>
                                        <el-checkbox :disabled="paySetting.plugin.cart && !paySetting.plugin.cart.open" :label="'cart'">购物车</el-checkbox>
                                        <el-checkbox :label="'live'">直播</el-checkbox>
                                        <el-checkbox :label="'cgp'">团购查找</el-checkbox>
                                        <el-checkbox :label="'videolist'" v-if="paySetting.plugin.videolist.open">视频列表</el-checkbox>
                                        <el-checkbox :label="'diypage'">DIY页面</el-checkbox>
                                        <el-checkbox :label="'goodstore'">老版好店</el-checkbox>
                                        <el-checkbox :label="'card_bag'" v-if="paySetting.plugin.card_bag.open">卡包</el-checkbox>
                                        <el-checkbox :label="'free'" v-if="paySetting.plugin.free.open">免单</el-checkbox>
                                        <el-checkbox :label="'fast_goods'">分类</el-checkbox>
                                        <el-checkbox :label="'my_card_bag'">次票列表</el-checkbox>
                                        <el-checkbox :label="'coupon_detail'">优惠券详情</el-checkbox>
                                        <el-checkbox :label="'coupon_receive'">老版领取优惠券页面</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                                <div class="diy-editor">
                                    <!-- <div class="alert-warning">
                                        <p>菜单保存以后需要重新发布小程序方可生效</p>
                                    </div> -->
                                    <div class="form-group bg-color">
                                        <div class="input-group flex-row">
                                            <span class="control-label">背景颜色</span>
                                            <span class="re-addon border-left">默认</span>
                                            <el-color-picker :predefine="predefineColors" v-if="getstyleData.bgcolor" v-model="getstyleData.bgcolor"></el-color-picker>
                                            <span class="re-addon border-right" @click="Reset('bgcolor','#ffffff')">重置</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group flex-row">
                                            <span class="control-label">文字颜色</span>
                                            <span class="re-addon border-left">默认</span>
                                            <el-color-picker :predefine="predefineColors" v-if="getstyleData.textcolor" v-model="getstyleData.textcolor"></el-color-picker>
                                            <span
                          class="re-addon"
                          @click="Reset('textcolor','#7a7e83')"
                          style="border-right: 0;cursor: pointer;"
                          >重置</span>
                                            <span class="re-addon">选中</span>
                                            <el-color-picker :predefine="predefineColors" v-if="getstyleData.textcoloron" v-model="getstyleData.textcoloron"></el-color-picker>
                                            <span
                          class="re-addon border-right"
                          @click="Reset('textcoloron','#ff4444')"
                          >重置</span>
                                        </div>
                                    </div>

                                    <div>
                                        <div v-for="(edititem,index) in editData" v-dragging="{ item: edititem, list: editData, group: 'editList'}" v-bind:key="index">
                                            <div class="list flex-row">
                                                <div class="marker" @click="delEdit(index)">x</div>
                                                <div class="nav-item">
                                                    <div class="app-nav-image-group flex-row">
                                                        <div class="nav-item-image-content">
                                                            <p>普通:</p>
                                                            <div class="nav-item-image-wrapper" @click="uploadTrigger('chooseIcon',index, 'default')">
                                                                <div class="nav-item-image-block img-center" :style="{'background-image':`url(${edititem.iconPath.file_path})`}"></div>
                                                                <div class="nav-item-image-text">选择</div>
                                                            </div>
                                                        </div>
                                                        <div class="nav-item-image-content">
                                                            <p>选中:</p>
                                                            <div class="nav-item-image-wrapper" @click="uploadTrigger('chooseIcon',index, 'active')">
                                                                <div class="nav-item-image-block img-center" :style="{'background-image':`url(${edititem.iconactivePath.file_path})`}"></div>
                                                                <div class="nav-item-image-text">选择</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="nav-item-tips">图片尺寸要求：100*100像素，支持PNG格式</div>
                                                    <div class="nav-item-link flex-row flex-align-c">
                                                        <div class="nav-item-link-label">链接:</div>
                                                        <!-- {{editData}} -->
                                                        <!-- @click="uploadtoggle(index,'link')" -->
                                                        <div class="readonly-div" @click="uploadTrigger('chooseUrl', index)">
                                                            <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                                <input
                                                                        autocomplete="off"
                                                                        :value="typeof edititem.linkurl =='string'?edititem.linkurl:edititem.linkurl.path"
                                                                        spellcheck="false"
                                                                        type="text"
                                                                        placeholder="请选择链接"
                                                                        readonly="readonly"
                                                                        class="ivu-input ivu-input-default"
                                                                      >
                                                                    </div> <i
                                                                      class="icon icon-fujian readonly-icon"
                                                                      style="left: 12px;margin-top:-3px;"
                                                                    ></i>
                                                            </div>
                                                        </div>
                                                        <div class="nav-item-link flex-row flex-align-c" style="margin-top:10px;">
                                                            <div class="nav-item-link-label">文字:</div>
                                                            <div class="readonly-div">
                                                                <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                                                                    <el-input v-model="edititem.text" placeholder="请选择链接"></el-input>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <el-button size="small" icon="el-icon-plus" @click="add_click" style="width: 100%;margin-top: 20px;">添加一个 ({{editData.length}}/5)</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </section>
                </div>
            </section>

            <choose-files ref="chooseFiles" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
            <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileChange"></choose-link>
        </div>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" type="primary" @click="saveForm" style="width:20%;margin:10px auto;">保存菜单</el-button>
    </div>
</div>
</template>

<script>
import Vue from 'vue'
import VueDND from 'awe-dnd'
Vue.use(VueDND)
import ChooseLink from '@/components/ChooseLink/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import Cookies from 'js-cookie'
import { addDiyMenuInfo, getDiyMenuInfo, applicationSourceOpen, sourceOpenSave } from '@/api/platform'
import { signid } from '@/utils/index'
export default {
  name: 'MProject',
  data() {
    return {
      open: 1,
      source: '',
      chooseLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '1'
      },
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image'
      },
      current: 0,
      model: 'default',
      isShowModel: false,
      checkList: [],
      params: [],
      // tabBar: [
      //   {
      //     iconPath: { file_path: '' },
      //     iconactivePath: { file_path: '' },
      //     text: '',

      //   }
      // ]
      editData: [],
      styleData: {
        textcolor: '#AAAAAA',
        bgcolor: '#ffffff',
        textcoloron: '#000000'
      },
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#111111',
        '#aaaaaa',
        '#dddddd'
      ],
      paySetting: {
        'plugin': {
          'member': {
            'open': true
          },
          'videolist': {
            'open': true
          }
        }
      }
    }
  },
  components: {
    ChooseLink,
    ChooseFiles
  },
  //    输出值前编程
  computed: {
    getstyleData() {
      return this.styleData
    },
     $agent(){
        //获取cooking中的agent_id
        return Cookies.get("agent_id")
      }
  },
  created() {
    this.$nextTick(() => {
      this.getMenu()
      const Base64 = require('js-base64').Base64
      const Cookies = require('js-cookie')
      const storeMenu = Cookies.get('STORE_MENU')
      // console.log(JSON.parse(Base64.decode('eyJwbHVnaW4iOnsiY291cG9uIjp7Im9wZW4iOnRydWV9LCJtZXNzYWdlIjp7Im9wZW4iOnRydWV9LCJzcGlrZSI6eyJvcGVuIjp0cnVlfSwibWVtYmVyIjp7Im9wZW4iOnRydWV9LCJkZWFsZXIiOnsib3BlbiI6dHJ1ZX0sImdyb3VwcyI6eyJvcGVuIjp0cnVlfX0sImNoYW5uZWwiOnsiSDUiOnsib3BlbiI6dHJ1ZX0sIndlY2hhdCI6eyJvcGVuIjp0cnVlfSwid3hhcHAiOnsib3BlbiI6dHJ1ZX0sImFsaWFwcCI6eyJvcGVuIjp0cnVlfSwiYmFpZHVhcHAiOnsib3BlbiI6dHJ1ZX0sInRvdXRpYW9hcHAiOnsib3BlbiI6dHJ1ZX0sImFuZHJvaWQiOnsib3BlbiI6dHJ1ZX0sImlvcyI6eyJvcGVuIjp0cnVlfX19')))
      if (storeMenu && typeof storeMenu === 'string') {
        const storeMenuBase = JSON.parse(Base64.decode(storeMenu))
        console.log(storeMenuBase, 'storeMenuBase')
        if (!!storeMenuBase && typeof storeMenuBase === 'object') {
          this.paySetting = storeMenuBase
        }
      }
    })
  },
  mounted() {
    this.getIsOpen()
  },
  methods: {
    getMenu() {
      getDiyMenuInfo().then(res => {
        console.log('dddddddddddddddddd', res)
        const { data: { data: [{ checkList = [], menu, source }] } } = res
        this.params = res.data.data
        this.source = source + ''
        console.log('this.params-----------', this.params)
        console.log('this.source-----------', this.source)
        if (menu || Array.isArray(checkList) && checkList.length > 0) {
          this.editData = this.formatData(menu.data)
          this.styleData = menu.style
          this.checkList = checkList
        }
        console.log('this.editData+++++++++++', this.editData)
        console.log('this.formatData(menu.data)+++++++++++', this.formatData(menu.data))
      })
    },
    getIsOpen() {
      applicationSourceOpen().then(res => {
        this.open = res.data.data.is_more_source
      })
    },
    changeOpen() {
      if (this.open == "2") {
        this.$confirm('关闭多渠道之后只会保留第一条导航链接设置，其他渠道的导航链接将会清空；之后要再开启多渠道后需要请重新配置！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sourceOpenSave({ is_more_source: this.open }).then(res => {
            const { code } = res.data
            if (code == 1) {
              this.$message.success('操作成功')
              this.getMenu()
            }
          })
        }).catch(() => {
          this.open == "1" ? this.open = "2" : this.open = "1"
        });
      } else {
        sourceOpenSave({ is_more_source: this.open }).then(res => {
          const { code } = res.data
          if (code == 1) {
            this.$message.success('操作成功')
            this.getMenu()
          }
        })
      }


    },
    change() {
      const data = this.params.filter(item => {
        if (item.source == this.source) {
          return item
        }
      })[0]
      this.editData = data && data.menu && data.menu.data ? this.formatData(data.menu.data) : []
      this.styleData = data && data.menu && data.menu.style ? data.menu.style : { textcolor: '#AAAAAA', bgcolor: '#ffffff', textcoloron: '#000000' }
      this.checkList = data && data.checkList ? data.checkList : []
    },
    uploadTrigger(evt, index, model) {
      console.log('chooseUrl++++++++++++++', evt, index, model)
      // if (evt === 'chooseIcon') {
      //   this.current = index
      //   this.model = model
      //   this.$refs.chooseFiles.toggle()
      // } else if (evt === 'chooseUrl') {
      //   this.current = index
      //   this.model = model
      //   this.$refs.chooseLink.toggle()
      // }
      if (evt === 'chooseIcon') {
        this.current = index
        this.model = model
        this.$refs.chooseFiles.toggle()
      } else if (evt === 'chooseUrl') {
        this.current = index
        this.model = model
        this.$refs.chooseLink.toggle()
      }
    },
    formatData(data) {
      // console.log(data)
      if (data) {
        const keys = Object.keys(data)
        const formatList = []
        keys.map((key, index) => {
          //   const item = data[key]
          data[key].signid = key
          data[key]['iconPath'] = data[key]['iconPath']
          data[key]['iconactivePath'] = data[key]['iconactivePath']
          formatList.push(data[key])
        })
        return formatList || []
      }
      return []
    },
    resetFormate() {
      const edit = this.editData
      const style = this.styleData
      const submitData = {}
      if (edit.length > 0) {
        const menu = {}
        edit.map((item, index) => {
          menu[item.signid] = {
            iconPath: item.iconPath || { file_path: '' },
            iconactivePath: item.iconactivePath || { file_path: '' },
            linkurl: item.linkurl,
            name: item.name,
            text: item.text
          }
        })
        submitData.data = menu
        submitData.style = style

        console.log(submitData)
        return submitData
      }
    },
    delEdit(index) {
      this.$confirm('此操作将删除该导航, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.editData.length > 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.editData.splice(index, 1)
          } else {
            this.$message({
              type: 'error',
              message: '菜单栏至少保留一个!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          })
        })
    },
    saveForm() {
      const mensuData = this.resetFormate()
      if (mensuData) {
        const saveMenuData = this.open == 1 ? {
          menu: mensuData,
          checkList: this.checkList,
          source: this.source
        } : {
          menu: mensuData,
          checkList: this.checkList

        }
        let data = []
        if (this.open == 1) {
          this.params.forEach((item, index, arr) => {
            if (item.source == this.source) {
              arr.splice(index, 1)
            }
          })

          this.params.push(saveMenuData)
          data = this.params
          console.log('data22222222222', data)
        } else {
          data = [saveMenuData]
        }

        addDiyMenuInfo({ data: data }).then(res => {
          const { data: { code, msg } } = res
          if (code === 1) {
            this.$message.success('保存成功')
          } else {
            this.$message.error(msg)
          }
        })

        console.log(saveMenuData)
      } else {
        this.$message.error('请设置菜单栏~!')
      }
    },
    uploadFileChange(files) {
      console.log(files)
      const { key } = files
      if (key === 'ChooseLink') {
        const { currentRow: [file_path], displayData: [{ name, title, path, app_id, type }] } = files
        if (file_path || path) {
          const current = this.current
          const currentItem = this.editData[current]
          currentItem.linkurl = file_path || { path, app_id, type }
          currentItem.name = type === '12' ? 'wehcat' : type === '13' ? 'sapp' : type === '14' ? 'phone' : name
          currentItem.text = title
          // currentItem.app_id = app_id
          // currentItem.type = type
        } else {
          this.$message.error('请选择链接~!')
        }
      } else {
        const { displayData: [file_path] } = files
        if (this.current !== -1 && file_path) {
          const currentItem = this.editData[this.current]
          currentItem[`${this.model === 'active' ? 'iconactivePath' : 'iconPath'}`] = file_path
        }
      }
    },
    onSubmit() {
      console.log('submit!')
    },
    add_click() {
      if (this.editData.length >= 5) {
        this.$message({
          message: '最大添加5个！',
          center: 'true',
          type: 'error'
        })
      } else {
        this.editData.push({
          iconPath: { file_path: '' },
          iconactivePath: { file_path: '' },
          linkurl: '',
          name: '',
          signid: signid('Mo'),
          text: ''
        })
      }
    },
    Reset(name, color) {
      this.styleData[name] = color
    }
  }
}
</script>

<style lang="scss" scoped>
.secation {
  background: #ffffff;
  padding: 0.2rem;
  border: 1px dashed orange;
  margin: 20px 0;
}

.page-body {
  border: 0;
}

.page-box {
  background: #f2f2f2;
}

.welcome-container {
  // padding: 20px;
  background: #ffffff;
}

.welcome-container .account-stat {
  margin-bottom: 20px;
}

.section-page.renovationbmenu-page {
  /deep/ .el-color-dropdown__btns .el-color-dropdown__value + .el-button {
    display: none !important;
  }

  .readonly-div {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;

    .readonly-icon {
      position: absolute;
      top: 5px;
      left: 12px;
    }

    .ivu-input-wrapper {
      display: inline-block;
      position: relative;
      vertical-align: middle;
      line-height: normal;
      width: 100%;

      input {
        background: #e8effc;
        border: 0;
        width: 100%;
        height: 28px;
        border-radius: 3px;
        padding-left: 18px;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
    }
  }

  & .tabbar-list {
    & .icon-link {
      font-size: 32px;
    }

    & .icon-link + span {
      line-height: 48px;
      margin-left: 8px;
    }

    & .urlbtn {
      margin-top: 20px;
      margin-bottom: 10px;
    }
  }

  & /deep/ .el-footer.footer {
    margin: 0 -20px;
    margin-bottom: -30px;
  }

  & .tabbar-list {
    .item {
      width: 100px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;

      img {
        width: 30px;
        display: inline-block;
      }

      .icon {
        display: block;
        height: auto;
        overflow: hidden;
        text-align: center;
      }

      .name {
        background: none;
        text-align: center;
        display: block;
        color: #888;
        font-size: 14px;
        line-height: 22px;
      }
    }

    .item:hover {
      background: #f3f3f3;
    }
  }

  & .welcome-container {
    position: relative;
  }

  & .welcome-container .panel-body {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 90px;
    padding-left: 116px;
  }

  & .welcome-container .panel-body {
    background: #ffffff;
  }

  & .phone-body {
    border: 1px solid rgb(228, 228, 228);
    overflow: hidden;
  }

  & .diy-main {
    margin-top: 40px;
    $page-width: 320px;

    .diy-phone {
      float: left;
      width: $page-width;
      height: auto;
      background: #fff;

      .phone-main {
        position: relative;
        height: 488px;
        background-color: #e5e5e5;
      }

      .diy-menu {
        width: $page-width;
        height: 50px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: #ffffff;

        .item {
          height: 50px;
          width: 20%;
          display: block;
          background: #fff;
          float: left;
          position: relative;
          cursor: pointer;

          .inner {
            height: 100%;
            width: 100%;
            background: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 997;
            text-align: center;
            color: #ffffff;
            padding: 0;

            .iconimg {
              height: 28px;
              width: 28px;
              margin: 4px auto 0;
              display: block;
            }

            .text {
              display: block;
              font-size: 0.55rem;
              color: #7a7e83;
              overflow: hidden;
              margin: 0 2px;
            }
          }
        }
      }
    }
  }

  .phone-title {
    height: 54px;
    background: url(../../assets/tabBar/wx-top2.png) 0 0 no-repeat;
    background-size: 100% auto;
    padding: 0 50px;
    font-size: 15px;
    color: #000000;
    text-align: center;
    line-height: 68px;
    cursor: default;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .alert-warning {
    color: #e6a23c;
    background-color: rgba(255, 243, 230, 0.8);
    border-color: #fff3e6;
    padding: 12px 15px;
    margin-bottom: 22px;
    border-radius: 3px;
  }

  .form-group {
    margin-bottom: 6px;
  }

  /* --------------------------------- */
  .control-label {
    white-space: nowrap;
    display: inline-block;
    text-align: right;
    padding-right: 6px;
    line-height: 28px;
  }

  .list {
    position: relative;
    height: auto;
    cursor: move;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid #e5e5e5;

    .nav-item {
      width: 100%;
    }

    .nav-item-image-content {
      font-size: 14px;
    }

    .marker {
      position: absolute;
      top: -9px;
      right: -9px;
      width: 18px;
      height: 18px;
      font-size: 14px;
      line-height: 16px;
      border-radius: 9px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      background-color: hsla(0, 0%, 60%, 0.6);
      display: none;
    }

    .nav-item-image-content + .nav-item-image-content {
      padding-left: 15px;
      margin-left: 15px;
      border-left: 1px solid #e5e5e5;
    }

    .nav-item-image-content {
      .nav-item-image-wrapper {
        position: relative;
        cursor: pointer;
        width: 64px;
        margin-top: 10px;
        border: 1px solid #e5e5e5;

        .nav-item-image-block {
          width: 64px;
          height: 50px;
          background-color: #2b2d30;
        }

        .nav-item-image-text {
          width: 64px;
          height: 14px;
          line-height: 14px;
          font-size: 12px;
          color: #fff;
          background-color: #797979;
          text-align: center;
        }
      }
    }

    .nav-item-tips {
      color: #999;
      padding: 5px 0 10px;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 10px;
    }

    .nav-item-link-label {
      margin-right: 10px;
    }

    .nav-item-link-select {
      color: #409eff;
      font-size: 12px;
      cursor: pointer;
      margin-left: 10px;
    }

    .nav-item-link-name {
      display: flex;
      justify-content: space-between;
      border: 1px solid;
      cursor: pointer;
      border-color: hsla(215, 100%, 60%, 0.3);
      background: #e2f3ff;
      color: #666666;
      margin-left: 10px;
      border-radius: 3px;
      flex: 1;
      font-size: 12px;
      line-height: 1;
      padding: 4px;
    }
  }

  .list:hover {
    .marker {
      display: block;
    }
  }

  .left {
    border: 1px solid #ddd;
    height: 70px;
    width: 68px;
    line-height: 70px;
    text-align: center;
    background: #fff;
    margin-right: 10px;
    cursor: move;
  }

  .left img {
    width: 30px;
  }

  .left p {
    height: 20px;
    width: 68px;
    background: rgb(127, 127, 127);
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    position: relative;
    top: -20px;
  }

  .right1 {
    margin-bottom: 10px;
  }

  & /deep/ .el-input__icon {
    line-height: 25px !important;
  }

  & /deep/ .el-color-picker__color {
    border-radius: 0px;
  }

  & /deep/ .el-color-picker {
    height: auto;
    vertical-align: middle;
  }

  & /deep/ .el-color-picker__trigger {
    height: 28px;
    width: 80px;
    padding: 0;
    border: none;
    border-radius: 0;
  }

  & .re-addon {
    height: 28px;
    text-align: center;
    line-height: 28px;
    padding: 0 5px;
    background: rgb(245, 247, 250);
    border: 1px solid #e4eaec;
    box-sizing: border-box;
    color: #909399;
  }

  & .border-left {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  & .border-right {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
  }

  & /deep/ .right1 .el-input__inner {
    background: #ffffff;
  }

  & /deep/ .right2 .el-input__inner {
    background: rgb(247, 247, 247);
  }

  & /deep/ .el-input__inner {
    height: 28px;
    border-color: #e4eaec;
  }

  & /deep/ .el-input.is-disabled .el-input__inner {
    cursor: Default;
    background: rgb(247, 247, 247);
  }

  & /deep/ .el-input-group__append,
  /deep/ .el-input-group__prepend {
    border-color: #e4eaec;
  }

  & .diy-editor {
    float: left;
    width: 400px;
    height: auto;
    background: #fdfdfd;
    padding: 25px 20px;
    margin-left: 18px;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
    border-radius: 5px;
    position: relative;
  }

  /deep/ .diy-editor .el-checkbox + .el-checkbox {
    margin-left: 0px;
  }

  /deep/ .diy-editor .el-checkbox {
    margin-right: 25px;
    margin-top: 6px;
  }

  & .diy-editor:last-child:after {
    content: "";
    position: absolute;
    top: 20px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: #fdfdfd;
    transform: rotate(45deg);
    border-bottom: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
  }

  & .edit-title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  & .new-phone-title {
    padding: 20px 0 24px;
    position: relative;
  }

  & .newone {
    position: absolute;
    top: 15px;
    left: 116px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;
  }

  & .newtwo {
    position: absolute;
    top: 15px;
    left: 132px;
    height: 8px;
    width: 50px;
    background: #ddd;
    border-radius: 8px;
  }

  & .round {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    box-shadow: 0 0 5px #ddd inset;
  }
}
</style>
